<template>
  <el-row>
    <el-col :span="12">
      <el-button class="ml-3" type="success" @click="submitUpload">
        不通过服务器上传
      </el-button>

    </el-col>

    <el-col :span="12">
      <el-button class="ml-3" type="success" @click="submitUpload2">
        通过服务器上传
      </el-button>
    </el-col>
  </el-row>
  <el-row justify="center">
    <el-col :span="24">
      <el-upload class="upload-demo" ref="uploadRef" :auto-upload="false" multiple :file-list="ffll"
        :before-upload="beforeUpload" :on-change="onChange">
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>

        <div class="el-upload__text">
          Drop file here or <em>click to upload</em>
        </div>
        <template #tip>
          <div class="el-upload__tip">
            jpg/png files with a size less than 500kb
          </div>
        </template>
      </el-upload></el-col>
  </el-row>
</template>

<script setup >
import { UploadFilled } from '@element-plus/icons-vue'
import { inject } from 'vue';

import { use_login_store } from '/src/stores/login.js'

const login_info=use_login_store();

const sg_oss = inject('h');

let fileList = {};
let ffll = [];
//是一个标准file对象https://developer.mozilla.org/zh-CN/docs/Web/API/File
//https://element-plus.gitee.io/zh-CN/component/upload.html#%E5%B1%9E%E6%80%A7
const onChange = (uploadFile, uploadFiles) => {
  console.log(uploadFile);
  fileList = uploadFile;
}

function beforeUpload(){}
// const uploadRef = ref();
const submitUpload = async () => {
  if (fileList == {} || !(fileList.raw instanceof File)) {
    console.log("请添加文件");
    return;
  }
  const res = await fetch(`${sg_oss}/sg-oss/oss/url_service/${fileList.name}`, {
    method: "post",
    headers: {
      "Content-Type": "application/json",
      // 'Content-Type': 'application/x-www-form-urlencoded',
      "satoken":login_info.get_token()
    },
    body: `{"size":"${fileList.raw.size}"}`
  })
  if (!res.ok) {
    console.log("请求服务出错");
    return
  }

  const res_json = await res.json();

  if (res_json.code != 0) {
    console.log(`请求上传url出错 ${res_json.info}`);
    return;
  }

  let ff=fileList.raw;
  if(res_json.res.file_wrapper=="formdata"){
    ff=new FormData();
    ff.append("file", fileList.raw,fileList.name);
  }else if(res_json.res.file_wrapper=="file"){

  }else{
    console.log("未知上传方式");
    return ;
  }
  const putres = await fetch(sg_oss + res_json.res.url, {
    method: res_json.res.method,
    // headers:{
    //   "Content-Type":"application/octet-stream"
    // },
    body: ff
  });
  if (!putres.ok) {
    console.log("上传请求出错");
    return
  }
  let upres=false;
  if(res_json.res.file_wrapper=="formdata"){
    const px=await putres.json();
    if(px.code==0){
      upres=true;
    }
  }else if(res_json.res.file_wrapper=="file"){
      upres=true;
  }else{
    //不会到达这里
  }
  if(upres){
    const re2=await (await fetch(`${sg_oss}/sg-oss/oss/record_upload/${fileList.name}`,{
      method:"post",
      headers:{
        "satoken":login_info.get_token()
      }
    })).json();
    if(re2.code==0){
      return ;
    }
    console.log("record_upload服务出错");
  }
  console.log("上传失败");
}

const submitUpload2=async ()=>{
  if (fileList == {} || !(fileList.raw instanceof File)) {
    console.log("请添加文件");
    return;
  }
  const formdata=new FormData();
  formdata.append("file", fileList.raw,fileList.name);
  const res = await fetch(`${sg_oss}/sg-oss/oss/upload`, {
    method: "post",
    headers: {
      // "Content-Type": "application/json",
      // 'Content-Type': 'application/x-www-form-urlencoded',
      "satoken":login_info.get_token()
    },
    body: formdata
  })
}
</script>
